﻿@model SMEsCustomer360Degree.Models.ViewModels.PortfolioManagement.AccountPlanningViewModel
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_content">
                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                        <ul class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                            <li id="pm-ap-tab" role="presentation" class="active">
                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanning, "AccountPlanning", "PortfolioManagement", null, null)
                            </li>
                            <li id="pm-pm-tab" role="presentation" class="">
                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.PortManagement, "PortfolioManagement", "PortfolioManagement", null, null)
                            </li>
                        </ul>
                        <!--Modal info dao -->
                        <div class="modal fade cm-cp-dao-info" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="col-md-12 profile_details">
                                            <div class="well profile_view">
                                                <div class="col-sm-12">
                                                    <h2 id="dao_info_name"></h2>
                                                    <p>
                                                        <strong>Position: </strong> <span id="dao_info_position"></span>
                                                    </p>
                                                    <ul class="list-unstyled">
                                                        <li><i class="fa fa-building"></i> <strong>Dao: </strong> <span id="dao_info_address"></span> </li>
                                                        <li><i class="fa fa-envelope"></i> <strong>Email : </strong><span id="dao_info_email"></span></li>
                                                        <li><i class="fa fa-phone"></i> <strong>Branch : </strong><span id="dao_info_office"></span></li>
                                                        <li><i class="fa fa-phone"></i> <strong>Region : </strong><span id="dao_info_landline"></span></li>
                                                        <li><i class="fa fa-mobile"></i> <strong>Start working date : </strong> <span id="dao_info_phone"></span></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /modals -->
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="tab_content2" aria-labelledby="profile-tab">
                                <div class="col-md-12">
                                    <div class="x_panel tile overflow_hidden">
                                        <div class="x_title">
                                        </div>
                                        <div id="div-pm-account-planning" class="x_content">
                                            <div id="cm-search-box" class="col-md-6 cm-search-box">
                                                <div class="col-md-5">
                                                    <select class="search_column form-control" tabindex="-1" required>
                                                        <option></option>
                                                    </select>
                                                    <ul class="parsley-errors-list filled" id="parsley_search_column" style="display:none;">
                                                        <li class="parsley-required">@SMEsCustomer360Degree.Core.Resources.Resource.MessRequiredField</li>
                                                    </ul>
                                                </div>
                                                <div class="col-md-7">
                                                    <input id="search_textbox" type="text" class="cm_search_textbox form-control" placeholder="Default Input">
                                                </div>
                                            </div>
                                            @switch (Model.UserRecord.GroupIdentifier)
                                            {
                                                case "4":
                                                    <table id="pm-account-planning" class="table table-bordered table-striped jambo_table">
                                                        <thead>
                                                            <tr>
                                                                <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.CifHeader</th>
                                                                <th class="column-title" width="10%">@SMEsCustomer360Degree.Core.Resources.Resource.NameHeader</th>
                                                                <th class="column-title" width="10%">@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader</th>
                                                                <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.MainSector</th>
                                                                <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.PaymentMethod</th>
                                                                <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.ActionHeader</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody></tbody>
                                                    </table>
                                                    break;
                                                case "3":
                                                <table id="pm-account-planning" class="table table-bordered table-striped jambo_table">
                                                    <thead>
                                                        <tr>
                                                            <th class="column-title">MSBO</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.CifHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.NameHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.MainSector</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.PaymentMethod</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.ActionHeader</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                                    break;
                                                case "2":
                                                <table id="pm-account-planning" class="table table-bordered table-striped jambo_table">
                                                    <thead>
                                                        <tr>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.Branch.ToUpper()</th>
                                                            <th class="column-title">MSBO</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.CifHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.NameHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.MainSector</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.PaymentMethod</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.ActionHeader</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                                    break;
                                                case "1":
                                                <table id="pm-account-planning" class="table table-bordered table-striped jambo_table">
                                                    <thead>
                                                        <tr>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.Zone.ToUpper()</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.Branch.ToUpper()</th>
                                                            <th class="column-title">MSBO</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.CifHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.NameHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.IndustryHeader</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.MainSector</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.PaymentMethod</th>
                                                            <th class="column-title">@SMEsCustomer360Degree.Core.Resources.Resource.ActionHeader</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                                    break;
                                                default:
                                                    break;
                                            }

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts
{
    @switch (Model.UserRecord.GroupIdentifier)
    {
        case "4":
            <script>
                var table_account_planning = $('#pm-account-planning').DataTable({
                    "order": [[0, 'asc']],
                    "bServerSide": true,
                    "bProcessing": true,
                    "responsive": true,
                    "bAutoWidth": false,
                    "aLengthMenu": [10, 30, 50, 100],
                    "pageLength": 10,
                    "sAjaxSource": '@Url.Action("AccountPlanningData", "PortfolioManagement")',
                    "fnServerData": function (sSource, aoData, fnCallback) {
                        $.ajax({
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            "success": fnCallback
                        });
                    },
                    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                    "sPaginationType": "simple_numbers",//"full_numbers",
                    destroy: true,
                    "aoColumns": [
                                { "sName": "CIF", "bSortable": false },
                                { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "MAIN SECTOR", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                                { "sName": "INFO", "bSortable": false }],
                    'fnCreatedRow': function (nRow, aData, iDataIndex) {
                        $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                        $('td', nRow).eq(5).attr('id', 'td_' + iDataIndex + '_action');
                    },
                    "aoColumnDefs": [{
                        "width": "12%",
                        "aTargets": [5],
                        "mRender": function (data, type, full) {
                            return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[0] + '\"><i class="fa fa-folder"></i> @SMEsCustomer360Degree.Core.Resources.Resource.ViewBtn </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/EditAccountPlanning?cif=' + full[0] + '\"><i class="fa fa-pencil"></i> @SMEsCustomer360Degree.Core.Resources.Resource.EditBtn </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[0] + '\"><i class="fa fa-pencil"></i> @SMEsCustomer360Degree.Core.Resources.Resource.HistoryBtn </a>';
                        }
                    }, {
                        "width": "5%",
                        "aTargets": [0]
                    }, {
                        "width": "15%",
                        "aTargets": [1]
                    }, {
                        "width": "20%",
                        "aTargets": [2]
                    }]
                });
                var dataSearch = [{ id: 0, text: 'Cif' }, { id: 1, text: 'Name' }];
                $(".search_column").select2({
                    placeholder: "Select column",
                    data: dataSearch
                });

                table_account_planning.columns().every(function () {
                    var that = this;

                    $('#search_textbox').on('keyup change', function () {
                        if ($(".search_column").val() == "") {
                            $("#parsley_search_column").show();
                            this.value = "";
                        } else {
                            if (that.index() == $(".search_column").val()) {
                                that.search(this.value).draw();
                            }
                        }

                    });
                    $(".search_column").on("change", function (e) {
                        $("#parsley_search_column").hide();
                        $('#search_textbox').val('');
                        that.search('').draw();
                    });
                });
            </script>
            break;
        case "3":
        <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
        <script>
            var table_account_planning = $('#pm-account-planning').DataTable({
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 10,
                rowsGroup: [0],
                "sAjaxSource": '@Url.Action("AccountPlanningData", "PortfolioManagement")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                destroy: true,
                "aoColumns": [
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "MAIN SECTOR", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }],
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                    $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                    $('td', nRow).eq(6).attr('id', 'td_' + iDataIndex + '_action');
                },
                "aoColumnDefs": [{
                    "width": "12%",
                    "aTargets": [6],
                    "mRender": function (data, type, full) {
                        return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[1] + '\"><i class="fa fa-folder"></i> @SMEsCustomer360Degree.Core.Resources.Resource.ViewBtn </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[1] + '\"><i class="fa fa-pencil"></i> @SMEsCustomer360Degree.Core.Resources.Resource.HistoryBtn </a>';
                    }
                }, {
                    "width": "12%",
                    "aTargets": [0],
                    "mRender": function (data, type, full) {
                        var showDao = full[0] == null ? full[6] : full[0]
                        return '<a onclick=\"showDaoInfo(\'' + full[6] + '\');\">' + showDao + ' </a>';
                    }
                }, {
                    "width": "12%",
                    "aTargets": [1]
                }]
            });
            var dataSearch = [{ id: 0, text: 'MSBO' }, { id: 1, text: 'Cif' }, { id: 2, text: 'Name' }];
            $(".search_column").select2({
                placeholder: "Select column",
                data: dataSearch
            });

            table_account_planning.columns().every(function () {
                var that = this;

                $('#search_textbox').on('keyup change', function () {
                    if ($(".search_column").val() == "") {
                        $("#parsley_search_column").show();
                        this.value = "";
                    } else {
                        if (that.index() == $(".search_column").val()) {
                            that.search(this.value).draw();
                        }
                    }

                });
                $(".search_column").on("change", function (e) {
                    $("#parsley_search_column").hide();
                    $('#search_textbox').val('');
                    that.search('').draw();
                });
            });
        </script>
            break;
        case "2":
        <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
        <script>
            var table_account_planning = $('#pm-account-planning').DataTable({
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 10,
                rowsGroup: [0, 1],
                "sAjaxSource": '@Url.Action("AccountPlanningData", "PortfolioManagement")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                destroy: true,
                "aoColumns": [
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "MAIN SECTOR", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }],
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                    $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                    $('td', nRow).eq(7).attr('id', 'td_' + iDataIndex + '_action');
                },
                "aoColumnDefs": [{
                    "width": "12%",
                    "aTargets": [7],
                    "mRender": function (data, type, full) {
                        return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[2] + '\"><i class="fa fa-folder"></i> @SMEsCustomer360Degree.Core.Resources.Resource.ViewBtn </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[2] + '\"><i class="fa fa-pencil"></i> @SMEsCustomer360Degree.Core.Resources.Resource.HistoryBtn </a>';
                    }
                }, {
                    "width": "12%",
                    "aTargets": [1],
                    "mRender": function (data, type, full) {
                        var showDao = (full[1] == null ? full[7] : full[1]);
                        return '<a onclick=\"showDaoInfo(\'' + full[7] + '\');\">' + showDao + ' </a>';
                    }
                }]
            });
            var dataSearch = [{ id: 0, text: 'Branch' }, { id: 1, text: 'MSBO' }, { id: 2, text: 'Cif' }, { id: 3, text: 'Name' }];
            $(".search_column").select2({
                placeholder: "Select column",
                data: dataSearch
            });

            table_account_planning.columns().every(function () {
                var that = this;

                $('#search_textbox').on('keyup change', function () {
                    if ($(".search_column").val() == "") {
                        $("#parsley_search_column").show();
                        this.value = "";
                    } else {
                        if (that.index() == $(".search_column").val()) {
                            that.search(this.value).draw();
                        }
                    }

                });
                $(".search_column").on("change", function (e) {
                    $("#parsley_search_column").hide();
                    $('#search_textbox').val('');
                    that.search('').draw();
                });
            });
        </script>
            break;
        case "1":
        <script src="/scripts/tableeditable/dataTables.rowsGroup.js"></script>
        <script>
            var table_account_planning = $('#pm-account-planning').DataTable({
                "order": [[0, 'asc']],
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 10,
                //bFilter: false,
                rowsGroup: [0, 1, 2],
                "sAjaxSource": '@Url.Action("AccountPlanningData", "PortfolioManagement")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "simple_numbers",//"full_numbers",
                destroy: true,
                "aoColumns": [
                            { "sName": "REGION", "bSortable": false },
                            { "sName": "BRANCH", "bSortable": false },
                            { "sName": "DAO", "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "MAIN SECTOR", "bSortable": false },
                            { "sName": "PAYMENTMETHOD", "bSortable": false },
                            { "sName": "INFO", "bSortable": false }],
                'fnCreatedRow': function (nRow, aData, iDataIndex) {
                    $(nRow).attr('id', 'my_account_planning' + iDataIndex); // or whatever you choose to set as the id
                    $('td', nRow).eq(8).attr('id', 'td_' + iDataIndex + '_action');
                },
                "aoColumnDefs": [{
                    "width": "12%",
                    "aTargets": [8],
                    "mRender": function (data, type, full) {
                        return '<a class=\"btn btn-primary btn-xs\"  href=\"/PortfolioManagement/ViewDataAccountPlanning?cif=' + full[3] + '\"><i class="fa fa-folder"></i> @SMEsCustomer360Degree.Core.Resources.Resource.EditBtn </a><a class=\"btn btn-primary btn-xs\" href=\"/PortfolioManagement/HistoryEdit?cif=' + full[3] + '\"><i class="fa fa-pencil"></i> @SMEsCustomer360Degree.Core.Resources.Resource.HistoryBtn </a>';
                    }
                }, {
                    "width": "5%",
                    "aTargets": [0]
                }, {
                    "width": "10%",
                    "aTargets": [1]
                }, {
                    "width": "10%",
                    "aTargets": [2],
                    "mRender": function (data, type, full) {
                        var showDao = full[2] == null ? full[8] : full[2]
                        return '<a onclick=\"showDaoInfo(\'' + full[8] + '\');\">' + showDao + ' <i class="fa fa-info-circle"></i> </a>';
                    }
                }, {
                    "width": "5%",
                    "aTargets": [3]
                }, {
                    "width": "12%",
                    "aTargets": [4]
                }, {
                    "width": "20%",
                    "aTargets": [5]
                }, {
                    "width": "15%",
                    "aTargets": [6]
                }]
            });
            var dataSearch = [{ id: 0, text: 'Region' }, { id: 1, text: 'Branch' }, { id: 2, text: 'MSBO' }, { id: 3, text: 'Cif' }, { id: 4, text: 'Name' }];
            $(".search_column").select2({
                placeholder: "Select column",
                data: dataSearch
            });

            table_account_planning.columns().every(function () {
                var that = this;

                $('#search_textbox').on('keyup change', function () {
                    if ($(".search_column").val() == "") {
                        $("#parsley_search_column").show();
                        this.value = "";
                    } else {
                        if (that.index() == $(".search_column").val()) {
                            that.search(this.value).draw();
                        }
                    }

                });
                $(".search_column").on("change", function (e) {
                    $("#parsley_search_column").hide();
                    $('#search_textbox').val('');
                    that.search('').draw();
                });
            });
        </script>
            break;
        default:
            break;
    }
    @if (true)
    {
        <script type="text/javascript">
            function showDaoInfo(dao) {
                $.ajax({
                    url: '@Url.Action("DaoInfo", "PortfolioManagement")',
                    type: "POST",
                    data: { dao: dao },
                    success: function (data_response) {
                        $('#dao_info_name').text(data_response['daoName']);
                        $('#dao_info_position').text(data_response['position']);
                        $('#dao_info_address').text(data_response['dao']);
                        $('#dao_info_email').text(data_response['email']);
                        $('#dao_info_office').text(data_response['branch']);
                        $('#dao_info_landline').text(data_response['region']);
                        $('#dao_info_phone').text(data_response['startwork']);
                        $('.cm-cp-dao-info').modal('show');
                    }
                })
            };
            function startPageTourGuide() {
                var intro = introJs();
                var steps = [
                        {
                            element: '#pm-ap-tab',
                            intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccountPlanningTab"
                        },
                        {
                            element: '#pm-pm-tab',
                            intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuidePortManTab",
                            position: 'right'
                        },
                        {
                            element: '#div-pm-account-planning',
                            intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTable',
                            position: 'bottom'
                        },
                        {
                            element: '#pm-account-planning_length',
                            intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableLength',
                            position: 'right',
                        },
                        {
                            element: '#cm-search-box',
                            intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableSearch",
                            position: 'bottom'
                        },
                        {
                            element: '#my_account_planning0',
                            intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRow",
                            position: 'bottom'
                        },
                        {
                            element: '#td_0_action',
                            intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTableRowAction",
                            position: 'left'
                        }
                ];
                intro.setOptions({
                    steps: steps,
                    showProgress: true,
                    scrollToElement: true,
                });
                intro.setOption('tooltipPosition', 'auto');
                intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
                intro.start();
            }
        </script>
    }
}